<template>
  <div>
    <Header></Header>
    <div class="s_bg">
      <div class="scd">
        <div class="b_h">
          <div class="name">
            <img src="./images/icon19.png" alt="" />
            <span>医疗机构</span>
          </div>
          <div class="pst">
            当前所在位置: <a @click.prevent="goHome">首页</a>&gt;<a class="on"
              >医疗机构</a
            >
          </div>
        </div>
      </div>
    </div>
    <div style="width: 1280px; height: 30px; margin-left: 90px">
      <div style="border: 2px black solid; padding: 20px">
        <div>
          <h5 style="font-size: 30px; display: inline">分类</h5>
        </div>
        <div style="margin-top: 20px">
          <h5 style="display: inline">等级:</h5>
          <el-select v-model="whichMedical" placeholder="请选择需要的医院">
            <!-- 通过axios动态请求后端,返回 -->
            <el-option label="村卫生室" value="村卫生室"></el-option>
            <el-option label="三级甲" value="三级甲"></el-option>
            <el-option label="其他医院" value="其他医院"></el-option>
          </el-select>
        </div>
        <div style="display: flex; margin-top: 20px">
          <h5 style="margin-top: 5px; display: inline">地区:</h5>
          <!-- <el-breadcrumb>
                        <el-breadcrumb-item 
                        style="font-size:18px;margin-top:10px;margin-left:10px"
                        v-for="m in medicalInstitutions" 
                        :key="m.id"
                        @click="getRegion(m)"
                        @onmousemove="changeShow"
                        ><i class="el-icon-bottom">{{m.title}}</i></el-breadcrumb-item>
                    </el-breadcrumb> -->
          <el-dropdown
            style="font-size: 18px; margin-top: 10px; margin-left: 10px"
          >
            <span class="el-dropdown-link">
              {{ $store.state.city
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              :append-to-body="false"
              class="popper-dropdown"
            >
              <el-dropdown-item v-for="(item, index) in areas" :key="index"
                ><span @click="aaa(item)">{{ item }}</span></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <!-- 展示区 -->
      <div style="border: 2px black solid" v-loading="loading">
        <div style="display: flex; margin-left: 1000px">
          <div
            style="
              font-size: 14px;
              margin-top: 10px;
              margin-right: 15px;
              color: gray;
            "
          >
            综合排序
          </div>
          <div
            style="
              font-size: 14px;
              margin-top: 10px;
              margin-right: 15px;
              color: gray;
            "
          >
            医院等级
          </div>
          <div>
            <el-checkbox v-model="checked">已开通预约挂号</el-checkbox>
          </div>
        </div>
        <ul style="margin-top: 10px; overflow-x: auto">
          <li
            v-for="m in medicalinstitution"
            :key="m.institutionId"
            style="display: flex; margin-bottom: 30px"
          >
            <img
              @click="goTodetail(m)"
              :src="m.institutionImg"
              style="width: 250px; height: 270px"
            />
            <el-card class="box-card">
              <div class="text item">
                {{ m.institutionName }}
              </div>
              <div class="text item">
                {{ m.institutionCity }}
              </div>
              <div class="text item">
                {{ m.institutionArea }}
              </div>
              <div class="text item">
                {{ m.institutionAttribute }}
              </div>
              <div class="text item">
                {{ m.institutionVip }}
              </div>
            </el-card>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header/Header";
export default {
  name: "MedicalInstitution",
  components: { Header },
  data() {
    return {
      whichMedical: "",
      checked: false,
      areas: [],
      medicalinstitution: [],
      whichOneArea: "",
      loading: false,
    };
  },
  methods: {
    goHome() {
      this.$router.push("/home");
    },
    goTodetail(m) {
      this.$store.state.m = m;
      this.$router.push({
        name: "twoMedical",
      });
    },
    aaa(item) {
      this.whichOneArea = item;
      this.$message("点击成功");
      console.log("institution_vip:" + this.whichMedical);
      console.log("Institution_area:" + item);
      this.$axios
        .get("/medicalInstitution/getAll_byvip", {
          params: {
            institution_city: this.$store.state.city,
            institution_vip: this.whichMedical,
            Institution_area: item,
          },
        })
        .then((res) => {
          console.log(res);
          this.medicalinstitution = res.data.data;
        });
    },
    getCity(val) {
      this.city = val.title;
    },
  },
  created() {
    this.loading = true;
    this.$axios
      .get("/medicalInstitution/getArea", {
        params: {
          institution_city: this.$store.state.city,
        },
      })
      .then((res) => {
        this.loading = false;
        this.areas = res.data.data;
      });
    this.$axios
      .get("/medicalInstitution/getAll_bycity", {
        params: {
          institution_city: this.$store.state.city,
        },
      })
      .then((res) => {
        this.medicalinstitution = res.data.data;
      });
  },
  watch: {
    whichMedical(val) {
      console.log("111111");
      this.$axios
        .get("/medicalInstitution/getAll_byvip", {
          params: {
            institution_city: this.$store.state.city,
            Institution_area: this.whichOneArea,
            institution_vip: val,
          },
        })
        .then((res) => {
          console.log(res);
          this.medicalinstitution = res.data.data;
        });
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1000px;
}
.popper-dropdown {
  min-width: 120px;
  position: absolute !important;
  top: 35px !important;
  left: -45px !important;
}
::v-deep .el-dropdown-menu {
  min-width: 120px;
  position: absolute !important;
  top: 35px !important;
  left: -45px !important;
}
.scd .b_h .pst {
  position: static;
  text-align: left;
  width: 90%;
  height: auto;
  line-height: 150%;
  padding: 15px 5%;
}
.scd .b_h .name,
.scd_em .b_h .name {
  width: 260px;
}
.scd .b_h,
.scd_em .b_h {
  width: 90%;
  height: 60px;
  line-height: 60px;
  margin-left: 90px;
  margin-top: 30px;
  border-bottom: 1px solid #bbb;
  position: relative;
  text-align: left;
  position: relative;
}
.scd .b_h .name,
.scd_em .b_h .name {
  display: inline-block;
  *display: inline;
  zoom: 1;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background: #0051ad;
  padding: 0 30px;
}
.scd .b_h .name img,
.scd .b_h .name span,
.scd_em .b_h .name img,
.scd_em .b_h .name span {
  display: inline-block;
  *display: inline;
  zoom: 1;
  height: 41px;
  line-height: 41px;
  vertical-align: top;
  margin-top: 10px;
  font-size: 24px;
  color: #fff;
}
.scd .b_h .name img,
.scd_em .b_h .name img {
  width: 41px;
  height: 41px;
  margin-right: 3px;
}
.scd .b_h .pst,
.scd_em .b_h .pst {
  width: 60%;
  text-align: right;
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 14px;
  color: #555555;
  height: 60px;
  line-height: 60px;
}
.scd .b_h .pst a,
.scd_em .b_h .pst a {
  font-size: 14px;
  color: #555;
}
.scd .b_h .pst a.on,
.scd .b_h .pst a:hover,
.scd_em .b_h .pst a.on,
.scd_em .b_h .pst a:hover {
  color: #0257b9;
}
.pst {
  width: 60%;
  text-align: right;
  position: absolute;
  margin-top: -10px;
  margin-left: 300px;
  font-size: 14px;
  color: #555555;
  height: 60px;
  line-height: 60px;
}
.pst a {
  font-size: 14px;
  color: #555;
}
.pst a:hover,
.scd_em .b_h .pst a.on,
.scd_em .b_h .pst a:hover {
  color: #0257b9;
}
a.on {
  color: #0257b9;
}
</style>
